<?xml version="1.0" encoding="UTF-8"?>
<ui:component xmlns="http://www.w3.org/1999/xhtml"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">
	
	<ui:composition template="/pages/templates/layout_principal.xhtml">
		<ui:define name="message">
			<rich:messages globalOnly="true" showSummary="true" showDetail="true" />
		</ui:define>
		
		<ui:define name="body" width="100%">
			<h:outputStylesheet>
				.fases-header-col1 {
					width: 5%;
					text-align: left;
				}
				.fases-header-col2 {
					width: 5%;
					text-align: center;
				}
				.fases-header-col3 {
					text-align: left;
				}
				.primeira-col {
					width: 60%;
					vertical-align: top;
				}
				.segunda-col {
					vertical-align: top;
				}
			</h:outputStylesheet>
			
			<h:form>
				<h:panelGrid styleClass="titulo">
					<h:outputText styleClass="titulo" value="#{planejarFasesControl.nomeProjeto} - Planejar Fases e Iterações" />
				</h:panelGrid>
				
				<br />
				
				<h:panelGrid columns="2" columnClasses="primeira-col, segunda-col" width="100%">
					<rich:dataTable id="listaFases" 
						var="fase" 
						value="#{planejarFasesControl.fases}" 
						styleClass="stable">
						<f:facet name="header">
							<rich:column>
								Fases/ Iterações
							</rich:column>
						</f:facet>
						
						<rich:column style="width: 50%; font-weight: bold;">
							<h:panelGrid columns="4" columnClasses="fases-header-col1, fases-header-col2, fases-header-col3" width="100%">
								<rich:collapsibleSubTableToggler for="subFases" />
								<a4j:commandLink action="#{planejarFasesControl.removerFase}" execute="@this" render="listaFases panelAdicionarFases">
									<h:graphicImage library="images" name="calendar_delete.png" title="Remover Fase" />
									<a4j:param assignTo="#{planejarFasesControl.faseSelecionada}" value="#{fase.indice}" />
								</a4j:commandLink>
								<h:outputText value="#{fase.nome}" />
							</h:panelGrid>
						</rich:column>
						<rich:column style="width: 15%;">
							<h:outputText value="#{fase.inicio}" style="font-weight: bold;">
								<f:convertDateTime pattern="dd/MM/yyyy" />
							</h:outputText>
						</rich:column>
						<rich:column style="width: 15%">
							<h:outputText value="#{fase.fim}" style="font-weight: bold;">
								<f:convertDateTime pattern="dd/MM/yyyy" />
							</h:outputText>
						</rich:column>
						<rich:column style="width: 15%">
							<h:outputText value="#{fase.horasEstimadas} hrs" style="font-weight: bold;"/>
						</rich:column>
						<rich:column style="widt: 5%; text-align: center;">
							<a4j:commandLink action="#{planejarFasesControl.novaIteracao}" execute="@this"
								render="novaIteracao" oncomplete="#{rich:component('novaIteracao')}.show()">
								<h:graphicImage library="images" name="date_add.png" title="Adicionar Iteração" />
								<a4j:param assignTo="#{planejarFasesControl.faseSelecionada}" value="#{fase.indice}" />
							</a4j:commandLink>
						</rich:column>
						<rich:collapsibleSubTable id="subFases" var="iteracao" value="#{fase.iteracoes}" expandMode="client">
							<rich:column>
								<a4j:commandLink action="#{planejarFasesControl.editarIteracao}" execute="@this" 
								value="##{iteracao.numero}" render="novaIteracao" oncomplete="#{rich:component('novaIteracao')}.show()">
									<a4j:param assignTo="#{planejarFasesControl.iteracaoSelecionada}" value="#{iteracao.numero}" />
									<a4j:param assignTo="#{planejarFasesControl.faseSelecionada}" value="#{fase.indice}" />
								</a4j:commandLink>
								
								<h:outputText value=" - #{iteracao.nome}" />
							</rich:column>
							<rich:column>
								<h:outputText value="#{iteracao.inicio}">
									<f:convertDateTime pattern="dd/MM/yyyy" />
								</h:outputText>
							</rich:column>
							<rich:column>
								<h:outputText value="#{iteracao.fim}">
									<f:convertDateTime pattern="dd/MM/yyyy" />
								</h:outputText>
							</rich:column>
							<rich:column style="width: 15%">
								<h:outputText value="#{iteracao.horasEstimadas} hrs" />
							</rich:column>
							<rich:column style="text-align: center;">
								<a4j:commandLink action="#{planejarFasesControl.removerIteracao}" execute="@this" render="listaFases"
									onclick="return confirm('Remover iteração: #{iteracao.nome}?');">
									<h:graphicImage library="images" name="delete.png" title="Remover Iteração" />
									<a4j:param assignTo="#{planejarFasesControl.faseSelecionada}" value="#{fase.indice}" />
									<a4j:param assignTo="#{planejarFasesControl.iteracaoSelecionada}" value="#{iteracao.numero}" />
								</a4j:commandLink>
							</rich:column>
						</rich:collapsibleSubTable>
					</rich:dataTable>
				
					<h:panelGroup>
						<rich:panel id="resumo" header="Resumo do Projeto">
							<h:panelGrid columns="2">
								<h:outputText value="Início:" />
								<h:outputText value="#{planejarFasesControl.inicioProjeto}">
									<f:convertDateTime pattern="dd/MM/yyyy" />
								</h:outputText>
								
								<h:outputText value="Fim:" />
								<h:outputText value="#{planejarFasesControl.fimProjeto}">
									<f:convertDateTime pattern="dd/MM/yyyy" />
								</h:outputText>
								
								<h:outputText value="Total Horas:" />
								<h:outputText value="#{planejarFasesControl.horasEstimadasProjeto} horas" />
							</h:panelGrid>
						</rich:panel>
						
						<br />
						
						<a4j:outputPanel id="panelAdicionarFases">
							<rich:panel header="Adicionar Fases" rendered="#{not empty planejarFasesControl.fasesNaoIncluidas}">
								
								<ui:repeat var="f" value="#{planejarFasesControl.fasesNaoIncluidas}">
									<a4j:commandLink style="padding: 5px;" execute="@this"  
										action="#{planejarFasesControl.adicionarFase}" render="listaFases panelAdicionarFases">
											<h:graphicImage library="images" name="add.png" />
											<h:outputText value="#{f.nome}" />
											<a4j:param assignTo="#{planejarFasesControl.faseSelecionada}" value="#{f.indice}" />
									</a4j:commandLink>
									<br/>
								</ui:repeat>
							</rich:panel>
						</a4j:outputPanel>
					</h:panelGroup>	
				</h:panelGrid>
				<h:panelGrid styleClass="botoes">
					<h:commandButton action="#{planejarFasesControl.finalizar}" value="Finalizar Planejamento" immediate="true" 
						onclick="return confirm('Tem certeza que deseja finalizar o Planejamento de Fases?')" />
				</h:panelGrid>
				
				<rich:popupPanel id="novaIteracao" modal="true" resizeable="false" autosized="true" 
					header="Iteração" domElementAttachment="form">
					
					<h:panelGrid columns="2" id="gridIteracao">
						<h:outputText value="Nome" />
						<h:panelGroup>
							<h:inputText id="nome" value="#{planejarFasesControl.nomeIteracao}" required="true" maxlength="80" />
							<rich:message for="nome" />
						</h:panelGroup>
						
						<h:outputText value="Duração (dias)" />
						<h:panelGroup>
							<h:inputText id="duracao" value="#{planejarFasesControl.duracao}" required="true">
								<f:validateLongRange minimum="1" />
							</h:inputText>
							<rich:message for="duracao" />
						</h:panelGroup>
						
						<h:outputText value="Esforço (hrs)" />
						<h:panelGroup>
							<h:inputText id="horas" value="#{planejarFasesControl.esforco}" required="true">
								<f:validateLongRange minimum="1" />
							</h:inputText>
							<rich:message for="horas" />
						</h:panelGroup>
						
						<rich:panel id="panelDetalhes" style="border: none; text-align: left; vertical-align:top;">
							<h:outputText value="Detalhes" />
							<rich:tooltip followMouse="false" layout="block">
								<span>Descreva aqui detalhes da iteração, como: <br/>- objetivos <br/>- releases 
									<br />- recursos necessários <br/>- etc...
								</span>
							</rich:tooltip>
						</rich:panel>
						<h:panelGroup>
							<h:inputTextarea id="detalhes" value="#{planejarFasesControl.detalhes}" cols="80" rows="8">
								<f:validateLength maximum="1000" />
							</h:inputTextarea>
							<rich:message id="msgDetalhes" for="detalhes" />
						</h:panelGroup>
					</h:panelGrid>
					
					<h:button value="Cancelar" onclick="#{rich:component('novaIteracao')}.hide(); return false;" />
					
					<a4j:commandButton value="#{planejarFasesControl.operacao}" render="listaFases gridIteracao resumo" 
						execute="@form" action="#{planejarFasesControl.adicionarIteracao}" 
						oncomplete="if (#{!facesContext.validationFailed}) { #{rich:component('novaIteracao')}.hide(); }" />
					
					<rich:jQuery selector="#duracao" query="mask('?999', {placeholder: ''})" />
					<rich:jQuery selector="#horas" query="mask('?9999', {placeholder: ''})" />
				</rich:popupPanel>
			</h:form>
			
			<rich:jQuery selector=".stable tr" event="mouseover" query="jQuery(this).addClass('active-row')" />
			<rich:jQuery selector=".stable tr" event="mouseout" query="jQuery(this).removeClass('active-row')" />
			
		</ui:define>
		
		<rich:jQuery selector=".stable tr:odd" query="addClass('odd-row')" />
		<rich:jQuery selector=".stable tr:even" query="addClass('even-row')" />
	</ui:composition>
</ui:component>